<template>
  <div class="bootom-view">
    <el-card class="view" shadow="hover">
      <template v-slot:header>
        <div class="title-wrapper">
          <div class="title">关键词搜索</div>
        </div>
      </template>
      <template>
        <div class="chart-wrapper">
          <div class="chart-inner">
            <div class="chart">
              <div class="chart-title">搜索用户数</div>
              <div class="chart-data">108,732</div>
              <v-chart :options="SearchUsersOption"></v-chart>
            </div>
            <div class="chart">
              <div class="chart-title">搜索量</div>
              <div class="chart-data">224,884</div>
              <v-chart :options="SearchUsersOption"></v-chart>
            </div>
          </div>
          <div class="table-wapper">
            <el-table :data="tbleData">
              <el-table-column prop="rank" label="排名" width="180"/>
              <el-table-column prop="keyword" label="关键词" width="180"/>
              <el-table-column prop="count" label="总搜索量"/>
              <el-table-column prop="users" label="搜索用户数"/>
              <el-table-column prop="range" label="点击率"/>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="100" @current-change="PageChange"/>
          </div>
        </div>
      </template>
    </el-card>
    <el-card class="view" shadow="hover">
      <template v-slot:header>
        <div class="title-wrapper">
          <div class="title">分类销售排行</div>
          <div class="radio-wrapper">
            <el-radio-group v-model="radioSelect" size="small">
              <el-radio-button label="品类"></el-radio-button>
              <el-radio-button label="商品"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>
      <template>
        <div class="chart-wrapper">
          <v-chart :options="categoryOption"/>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      SearchUsersOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
          areaStyle: {
            color: 'rgba(95,187,255,.5)'
          },
          lineStyle: {
            color: 'rgb(95,187,255)'
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }
      },
      SearchUsersNumberOption: {},
      radioSelect: '商品',
      tbleData: [
        { id: 1, rank: 1, keyword: '南宁', count: 9245, users: 7319, range: '79.17%' },
        { id: 2, rank: 2, keyword: '无锡', count: 9538, users: 4923, range: '51.61%' },
        { id: 3, rank: 3, keyword: '成都', count: 8689, users: 4729, range: '54.43%' },
        { id: 4, rank: 4, keyword: '常州', count: 5199, users: 4648, range: '89.40%' }
      ],
      categoryOption: {}
    }
  },
  methods: {
    PageChange(page) {
      console.log(page)
    },
    renderPieChart() {
      const chartData = [
        {
          legendname: '粉面粥店',
          value: 97,
          percent: '24.87%',
          itemStyle: {
            color: '#8d7fec'
          },
          name: '粉面粥店 | 24.87%'
        }, {
          legendname: '简餐便当',
          value: 38,
          percent: '15.64%',
          itemStyle: {
            color: '#5085f2'
          },
          name: '简餐便当 | 15.64%'
        }, {
          legendname: '汉堡披萨',
          value: 3,
          percent: '1.23%',
          itemStyle: {
            color: '#f8726b'
          },
          name: '汉堡披萨 | 1.23%'
        }, {
          legendname: '香锅冒菜',
          value: 91,
          percent: '37.45%',
          itemStyle: {
            color: '#e7e702'
          },
          name: '香锅冒菜 | 37.45%'
        }, {
          legendname: '小吃炸串',
          value: 56,
          percent: '23.05%',
          itemStyle: {
            color: '#4bc1fc'
          },
          name: '小吃炸串 | 23.05%'
        }, {
          legendname: '地方菜系',
          value: 15,
          percent: '6.17%',
          itemStyle: {
            color: '#78f283'
          },
          name: '地方菜系 | 6.17%'
        }
      ]

      this.categoryOption = {
        title: [
          {
          text: '品类分布',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          left: 20,
          top: 20
        },
        {
          text: '累计订单量',
          subtext: '320',
          x: '34.5%',
          y: '42.5%',
          textAlign: 'center',
          textStyle: {
            fontSize: 14,
            color: '#999'
          },
          subTextStyle: {
            fontSize: 28,
            color: '#333'
          }
        }],
        series: [{
          type: 'pie',
          data: chartData,
          name: '品类分布',
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return params.data.legendname
              }
            }
          },
          center: ['35%', '50%'],
          radius: ['45%', '60%'],
          itemStyle: {
            borderWidth: 4,
            borderColor: '#fff'
          }
        }],
        legend: {
          orient: 'vertical',
          height: 300,
          left: '70%',
          top: 'middle'
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const str = params.seriesName + '<br />' +
              params.marker + params.data.legendname + '<br />' +
              '数量：' + params.data.value + '<br />' +
              '占比：' + params.data.percent
            return str
          }
        }
      }
      console.log(chartData)
    }
  },
  mounted() {
    this.renderPieChart();
  }
}
</script>

<style lang="scss">
.bootom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;

    &:first-child {
      margin-right: 10px;
    }

    &:last-child {
      margin-left: 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 0 0 20px;
      border-bottom: 1px solid #eee;

      .title {
        font-weight: 500;
        font-size: 14px;
        color: #333;
      }
    }

    .radio-wrapper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
    }
  }
}

.chart-wrapper {
  width: 100%;
  height: 452px;
  display: flex;
  flex-direction: column;

  .chart-inner {
    display: flex;
    padding: 0 10px;
    margin-top: 20px;
    justify-content: space-around;
    .chart {
      flex: 1;
      width: 100%;
      height: 100%;
      padding: 0 10px;

      .chart-title {
        color: #999;
        font-size: 14px;
      }

      .chart-data {
        font-size: 22px;
        color: #333;
        font-weight: 500;
        letter-spacing: 2px;
        margin-top: 5px;
      }

      .echarts {
        height: 50px;
      }
    }
  }

  .table-wapper {
    flex: 1;
    margin-top: 20px;
    padding: 0 20px 20px;

    .el-pagination {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }
  }
}
</style>
